import React, { useEffect, useRef, useState } from 'react'
import { Button, Form, Input, Table, Space, Tag } from 'antd'
import { getUserData } from '../../api'
import AddOrEditForm from './form'
import './user.scss'

const User = () => {
  // 表格展示内容
  const columns = [
    {
      title: '',
      width: 50,
      render: (_, __, index) => index + 1,
      align: 'center'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true
    },
    {
      title: '名字',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      ellipsis: true
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      ellipsis: true,
      render: (_, record) => {
        return <Tag color='purple'>{record.email}</Tag>
      }
    },
    {
      title: '城市',
      dataIndex: 'address',
      key: 'email',
      ellipsis: true,
      render: (_, record) => record.address.city
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <Space size='middle'>
          <a onClick={() => handleClick('edit', record)}>编辑</a>
          <a>删除</a>
        </Space>
      )
    }
  ]

  const handleFinish = (e) => {
    console.log(e)
  }
  useEffect(() => {
    initData()
  }, [])

  // 页数
  let page = useRef(1)
  // 每页显示条数
  let limit = 5
  // 表格数据
  let [tableData, setTableData] = useState([])
  let [loading, setLoading] = useState(false)
  // 分页数据
  const [paginationParams, setPaginationParams] = useState({
    current: page.current,
    pageSize: limit,
    total: 0
  })

  // 获取用户列表
  const initData = async () => {
    let start = (page.current - 1) * limit
    setLoading(true)
    const data = await getUserData(start, limit).finally(() => {
      setLoading(false)
    })
    setTableData(data)
    setPaginationParams(Object.assign(paginationParams, { total: 100 }))
  }

  // 表格分页或排序变化
  const handleTableChange = (pagination) => {
    let currentPage = pagination.current
    page.current = currentPage
    setPaginationParams(Object.assign(paginationParams, { current: currentPage }))
    initData()
  }

  // 新增或编辑按钮的回调函数
  const handleClick = (type, record = {}) => {
    if (type === 'add') {
      AddOrEditFormRef.current?.resetData()
    } else {
      AddOrEditFormRef.current?.setData(record)
    }
  }

  // 编辑成功或添加成功后的回调函数
  const handleSuccess = () => {
    console.log('父组件收到')
  }

  let AddOrEditFormRef = useRef()

  return (
    <div className='user'>
      <div className='top-tool'>
        <Button
          type='primary'
          onClick={() => {
            handleClick('add')
          }}>
          新增
        </Button>
        <Form layout='inline' onFinish={handleFinish}>
          <Form.Item name='keyword'>
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Button type='primary' htmlType='submit'>
            搜索
          </Button>
        </Form>
      </div>
      <Table
        loading={loading}
        pagination={paginationParams}
        dataSource={tableData}
        columns={columns}
        onChange={handleTableChange}
        rowKey='id'
      />
      <AddOrEditForm
        ref={AddOrEditFormRef}
        handleSuccess={handleSuccess}
      />
    </div>
  )
}

export default User
